<div class="myfirst" style="color: rgb(230, 151, 206);height: fit-content;font-size: medium;font-family:Edwardian Script ITC;text-align-last: center;
  "hello oprnharmony>/div>
    <button>开源鸿蒙万岁我的最好看我的最好看我的最好看</button>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="text-container">
      <h1>helloopenharmony</h1>
    </div>
    <style>
      .text-container {
        display: flex;
        align-items: center;
        justify-content: center;

        h1 {
          font-size: 200px;
          font-weight: 900;
          background: linear-gradient(
              217deg,
              #ca62c350,
              rgba(0, 0, 0, 0.2) 70.71%
            ),
            linear-gradient(127deg, #f3b3ce, rgba(247, 197, 215, 0.2) 80.71%),
            linear-gradient(336deg, #f23477d8, rgba(249, 193, 224, 0.2) 80.71%);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          position: relative;
        }
        h1::before {
          content: "helloopenharmony";
          position: absolute;
          text-shadow: 5px 5px 2px rgba(237, 66, 151, 0.799);
          z-index: -1;
          display: block;
        }
        h1::after {
          content: "helloopenharmony";
          position: absolute;
          background: url("./white-bar.png") no-repeat;
          color: transparent;
          display: block;
          z-index: 1;
          top: 0;
          left: 0;
          background-clip: text;
          animation: leftToRight 2s ease-in infinite;
          filter: blur(10px);
        }
      }

      @keyframes leftToRight {
        0% {
          background-position: -50% 0;
        }
        100% {
          background-position: 150% 0;
        }
      }
    </style>
  </body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: linear-gradient(to right, rgba(252, 184, 230, 0.865), rgb(159, 232, 240));
  height: 100%;
  margin: 0;
}
</style>
</head>
<body>
 
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好好看哦</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #canvas {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
function random(min, max) {
  return Math.random() * (max - min) + min;
}
 
function randomInt(min, max) {
  return Math.random() * (max - min + 1) + min;
}
 
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    stars = [],
    canvasOffsetX, canvasOffsetY,
    tick = 0;
 
function init() {
  canvasOffsetX = canvas.offsetLeft;
  canvasOffsetY = canvas.offsetTop;
  resizeCanvas();
  createStars();
  animate();
}
 
function createStars() {
  for (var i = 0; i < 1000; i++) {
    stars.push(new Star());
  }
}
 
function Star() {
  this.x = random(0, w);
  this.y = random(0, h);
  this.z = random(0, 20000);
  this.vx = random(-.5, .5);
  this.vy = random(-.5, .5);
  this.size = random(1, 2);
  this.speed = random(1, 3);
}
 
Star.prototype.update = function() {
  this.x += this.vx * this.speed;
  this.y += this.vy * this.speed;
 
  if (this.x > w || this.x < 0) this.vx *= -1;
  if (this.y > h || this.y < 0) this.vy *= -1;
 
  this.z += this.speed;
};
 
function resizeCanvas() {
  canvas.width = w;
  canvas.height = h;
}
 
function animate() {
  ctx.clearRect(0, 0, w, h);
 
  for (var i = 0; i < stars.length; i++) {
    stars[i].update();
    drawStar(stars[i]);
  }
 
  tick++;
  requestAnimationFrame(animate);
}
 
function drawStar(s) {
  var pct = s.z / 20000;
  var twinkle = random(0, 1) < pct ? 0.25 : 0;
  ctx.fillStyle = 'white';
  ctx.beginPath();
  ctx.arc(s.x, s.y, s.size + twinkle, 0, 2 * Math.PI);
  ctx.fill();
}
 
init();
window.addEventListener('resize', resizeCanvas, false);
</script>
</body>
</html>